<template>
  <div v-loading="loading" class="wx">
    <div class="wx__img" />
    <div class="wx__title">您的企业微信中还未添加IBECRM，无法在此登录</div>
    <div class="wx__des">您是企业微信管理员？点击按钮添加IBECRM</div>
    <el-button class="wx__btn" type="primary" @click="addAppClick">添加IBECRM</el-button>
    <div class="wx__des">您是企业微信普通成员？请将IBECRM推荐给管理员</div>
  </div>
</template>

<script>
import { wechatGetPreAuthCodeAPI } from '@/wechat/api'

export default {
  // 企业微信登录注册
  name: 'WechatLoginRegister',

  components: {},

  props: {},

  data() {
    return {
      loading: false,
      authUrl: ''
    }
  },

  computed: {},

  watch: {},

  created() {
  },

  mounted() {
    this.getPreAuth()
  },

  beforeDestroy() {},

  methods: {
    /**
     * 获取预授权码
     */
    getPreAuth() {
      this.loading = true
      wechatGetPreAuthCodeAPI().then(res => {
        const preAuthCode = res.data
        this.authUrl = `https://open.work.weixin.qq.com/3rdapp/install?suite_id=ww9d563a26c890fe81&pre_auth_code=${preAuthCode}&redirect_uri=${encodeURIComponent(`${WKConfig.getLocationOrigin()}/crm/#/wechatLoginResult`)}&state=STATE`
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    addAppClick() {
      window.location.href = this.authUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.wx {
  text-align: center;
  background-color: #f4f9ff;

  &__img {
    display: block;
    width: 100%;
    height: 30vh;
    margin: 15vh auto 0;
    background: url("./wx_bg.png") no-repeat center;
    background-size: contain;
  }

  &__title {
    margin-top: 20px;
    font-size: 17px;
  }

  &__des {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
  }

  &__btn {
    margin-top: 20px;
    margin-bottom: 30px;
  }
}
</style>
